<!-- 权限按钮组件 -->
<template>
  <el-button v-if="hasPermissionFlag" v-bind="$attrs" @click="handleClick">
    <slot></slot>
  </el-button>
</template>

<script setup>
import { computed } from 'vue'
import { hasPermission as checkPermission } from '@/utils/permission'

const props = defineProps({
  permission: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

// 判断是否有权限
const hasPermissionFlag = computed(() => {
  if (!props.permission) return true
  return checkPermission(props.permission)
})

// 点击事件
const handleClick = (event) => {
  emit('click', event)
}
</script>
